<template>
  <view class="container">
    <view class="intro"> </view>

    <view class="login_common w-80">
      <view class="phone_number d-flex p-30 align-items-center">
        <view class="mr-20">手机号:</view>
        <view class="w-60">
          <input
            :focus="phone_focus"
            ref="phonenumber"
            type="number"
            value=""
            @input="InputPhone"
            maxlength="11"
          />
        </view>
      </view>
      <view class="tips d-flex p-10 just-content-center">
        <view class="text-color-assist">
          未注册的手机号码验证后自动创建用户</view
        >
      </view>

      <view class="d-flex p-30 align-items-center">
        <view class="mr-20">验证码 : </view>
        <view class="w-40">
          <input type="number" value="" @input="InputSms" />
        </view>

        <view class="">
          <button
            type="getSMS"
            ref="getSMS"
            :class="classObjectBtnGetSMS"
            @tap="hanlderBtnSend()"
          >
            获取验证码
          </button>
          <!-- <button type="getSMS" class="getsms_await" @tap="getSMS">获取验证码</button> -->
        </view>
      </view>

      <view class="text-center">
        <button class="w-100" type="primary" @tap="hanlderBtnLog()">
          登录
        </button>
      </view>
    </view>
    <!-- 
		<view>
			<button type="minor">123</button>
		</view> -->
    <view>
      <u-toast ref="tips"></u-toast>
    </view>
    <view>
      <!-- <u-message-input maxlength="4" :value="1234"></u-message-input> -->
      <!-- <u-message-input mode="bottomLine" maxlength="5" value="46821"></u-message-input> -->
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";

export default {
  data() {
    return {
      username: "",
      member: {
        phone: "",
        sms: "",
      },
      phone_focus: false,
      hasClicked: false,
      sms: "",
      conuntdown: 60,
      showcountdown: null, // 定时器
    };
  },
  onReady() {
    // 设置focus延迟, 防止键盘直接弹出
    setTimeout(() => {
      this.phone_focus = true;
    }, 1000);
  },
  computed: {
    classObjectBtnGetSMS() {
      // 计算属性 || data
      return {
        getsms_await: this.isCanNotClick,
      };
    },
    isPhoneNumberComplete() {
      return this.member.phone.length == 11 ? true : false;
    },
    isCanNotClick() {
      console.log(!this.isPhoneNumberComplete || this.hasClicked);
      return !this.isPhoneNumberComplete || this.hasClicked;
    },
  },

  onUnload() {
    console.log("stop timer.");
    clearInterval(this.showcountdown);
    this.showcountdown = null;
    console.log(this.showcountdown);
  },

  methods: {
    ...mapMutations(["SET_MEMBER_TEST"]),
    ...mapActions(["getStore", "storeSetMember"]),
    InputPhone(e) {
      this.member.phone = e.target.value;
    },
    InputSms(e) {
      this.member.sms = e.target.value;
    },
    AdminIog() {
      if (this.member.sms === "1") {
        return true;
      }
      return false;
    },
    hanlderBtnSend() {
      // 发送验证码点击事件
      let flag = this.isCanNotClick;
      if (flag) {
        console.log("停止事件");
        if (!this.isPhoneNumberComplete) {
          this.$refs.tips.show({
            title: "输入有效的手机号!",
            type: "warning",
          });
        } else {
          this.$refs.tips.show({
            title: "请稍等一段时间后重试!",
            type: "warning",
          });
        }
        return;
      } else {
        this.hasClicked = true;
        this.GetSMS();
      }
    },
    hanlderBtnLog() {
      // 登录事件
      this.Log();
    },
    // 获取短信验证码
    // 等待 60s

    GetSMS() {
      var i = this.conuntdown;
      let content;
      if (this.hasClick == true) {
        console.log("请等待");
      }
      this.hasClick = true;

      // this.ShowLoding();
      let smsing = setTimeout(() => {
        this.HideLoding();
      }, 1000);
      // 定时器
      // 赋值给data
      this.showcountdown = setInterval(() => {
        i = i - 1;
        content = `${i} S`;
        this.$refs.getSMS.$el.innerText = content;
        if (i == 0) {
          content = "获取验证";
          this.$refs.getSMS.$el.innerText = content;
          // hasClicked:false
          this.hasClicked = false;
          clearInterval(this.showcountdown);
        }
      }, 1000);
      this.showcountdown;
      // 调用 阿里云 短信接口.
      this.Send();
    },
    // 登录
    Log() {
      if (true) {
        // if (this.member.sms == 1) {
        //   uni.switchTab({
        //     url: "/pages/mine/member",
        //   });
        // }
        this.$u.api
          .login({
            code: this.member.sms,
            mobile: this.member.phone,
          })
          .then((res) => {
            let that = this;
            if (res.code == 0) {
              // uni.setStorage()
              console.log(res);
              // set user 
              uni.switchTab({
                url: "/pages/mine/member",
              });
            }
          });
      }
    },
    //  检查
    CensorPhone() {
      let flag = this.member.phone.length == 11 ? true : false;
      console.log(this.$ref);
      return flag;
    },
    // 发送短信
    Send() {
      console.log(this.member.phone);
      const p = {
        phone: this.member.phone,
      };
      this.$u.api.getsms(p).then((res) => {
        console.log(res);
      });
    },
    ShowLoding() {
      uni.showLoading({
        title: "正在获取验证码",
      });
    },
    HideLoding() {
      uni.hideLoading();
    },
  },
};
</script>

<style lang="scss" scoped>
.login_common {
  margin: 20rpx auto;

  .phone_number {
    // 和文字之间的间距
    padding-bottom: 5rpx;
  }
  .tips {
    font-size: $uni-font-size-mm;
  }

  input {
    box-sizing: border-box;
    padding: 5rpx 5rpx;

    outline: none;

    :hover {
      border-bottom: 1px solid #a10000;
    }

    :focus {
      border-bottom: 1px solid #a10000;
    }
  }
}

button {
  &.getsms_await {
    background-color: $uni-bg-color-disable;
    color: $uni-text-color-disable;
  }
}
</style>
